<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="generator" content="Gatsby 2.13.73"/><style id="react-native-stylesheet">[stylesheet-group="0"]{}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
body{margin:0;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
[stylesheet-group="0.1"]{}
:focus:not([data-focusvisible-polyfill]){outline: none;}
[stylesheet-group="1"]{}
.css-1dbjc4n{-ms-flex-align:stretch;-ms-flex-direction:column;-ms-flex-negative:0;-ms-flex-preferred-size:auto;-webkit-align-items:stretch;-webkit-box-align:stretch;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-basis:auto;-webkit-flex-direction:column;-webkit-flex-shrink:0;align-items:stretch;border:0 solid black;box-sizing:border-box;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;min-height:0px;min-width:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;position:relative;z-index:0;}
[stylesheet-group="2"]{}
.r-13awgt0{-ms-flex-negative:1;-ms-flex-positive:1;-ms-flex-preferred-size:0%;-webkit-box-flex:1;-webkit-flex-basis:0%;-webkit-flex-grow:1;-webkit-flex-shrink:1;flex-basis:0%;flex-grow:1;flex-shrink:1;}
.r-1udh08x{overflow-x:hidden;overflow-y:hidden;}
[stylesheet-group="2.2"]{}
.r-12vffkv>*{pointer-events:auto;}
.r-12vffkv{pointer-events:none!important;}
.r-18u37iz{-ms-flex-direction:row;-webkit-box-direction:normal;-webkit-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row;}
.r-13qz1uu{width:100%;}
.r-1awozwy{-ms-flex-align:center;-webkit-align-items:center;-webkit-box-align:center;align-items:center;}
.r-1777fci{-ms-flex-pack:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;}
.r-1pi2tsx{height:100%;}
.r-u8s1d{position:absolute;}
.r-z80fyv{height:20px;}
.r-19wmn03{width:20px;}
.r-17bb2tj{-webkit-animation-duration:0.75s;animation-duration:0.75s;}
.r-1muvv40{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}
.r-127358a{-webkit-animation-name:r-9p3sdl;animation-name:r-9p3sdl;}
@-webkit-keyframes r-9p3sdl{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
@keyframes r-9p3sdl{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
.r-1ldzwu0{-webkit-animation-timing-function:linear;animation-timing-function:linear;}
.r-1r8g8re{height:36px;}
.r-1acpoxo{width:36px;}</style><title data-react-helmet="true">Animations</title><link as="script" rel="preload" href="/rn-placeholder/webpack-runtime-078e73121d17eb8e9125.js"/><link as="script" rel="preload" href="/rn-placeholder/app-c1d0fda0f226c9c9e4f2.js"/><link as="script" rel="preload" href="/rn-placeholder/3-7b088af076c51f06ef3f.js"/><link as="script" rel="preload" href="/rn-placeholder/component---src-templates-page-js-6b5bdc100882280b29ff.js"/><link as="fetch" rel="preload" href="/rn-placeholder/page-data/animations/page-data.json" crossorigin="anonymous"/></head><body><noscript id="gatsby-noscript">This app works best with JavaScript enabled.</noscript><div id="___gatsby"><div class="css-1dbjc4n r-13awgt0 r-12vffkv" data-reactroot=""><div class="css-1dbjc4n r-13awgt0 r-12vffkv"><div style="outline:none" tabindex="-1" role="group" id="gatsby-focus-wrapper"><style data-emotion-css="1w0sgte">a{-webkit-text-decoration:none;text-decoration:none;color:black;border-left:0.3em solid transparent;color:#3F51B5;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}a:active{color:#303F9F;}p,span{color:#616161;}h1,h2,h3,h4,h5,h6,a,li,p{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;line-height:1.7em;}p > code{background-color:#efefef;border-radius:3px;padding:0 0.4em;}.link.link-active{color:#3F51B5;}.link{color:#616161;}.link:hover{font-weight:normal;-webkit-text-decoration:underline;text-decoration:underline;}.link:active{color:#303F9F;}.anchor{margin-right:0.3em;margin-left:-1em;}img{max-width:100%;}pre{overflow:auto;}</style><style data-emotion-css="ltkdwp">.css-ltkdwp{margin:0 20%;margin-bottom:1em;}@media only screen and (max-width:480px){.css-ltkdwp{margin:0 10%;}}</style><div class="css-ltkdwp ezvg0km0"><style data-emotion-css="5ncox9">.css-5ncox9{height:64px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}@media only screen and (max-width:480px){.css-5ncox9{-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;height:auto;margin:-1rem;}}</style><nav class="css-5ncox9 epjnmrm0"><style data-emotion-css="1x0v55s">.css-1x0v55s{font-size:1.5em;font-weight:700;color:#3F51B5;}@media only screen and (max-width:480px){.css-1x0v55s{font-size:1.2em;margin-bottom:1rem;}}</style><a class="css-1x0v55s epjnmrm1" href="/rn-placeholder/">rn-placeholder v3<!-- --> <span><a href="https://github.com/mfrachet/rn-placeholder" data-show-count="true" aria-label="Star mfrachet/rn-placeholder on GitHub">Star</a></span></a><style data-emotion-css="1jswbpe">.css-1jswbpe{list-style-type:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media only screen and (max-width:480px){.css-1jswbpe{background-color:#efefef;height:50px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;overflow:auto;}}</style><ul class="css-1jswbpe epjnmrm3"><style data-emotion-css="txeiyh">.css-txeiyh{padding:0 0.5rem;}</style><li class="css-txeiyh epjnmrm2"><a class="link" href="/rn-placeholder/">Usage</a></li><li class="css-txeiyh epjnmrm2"><a class="link" href="/rn-placeholder/migrating-from-previous-version">Migration</a></li><li class="css-txeiyh epjnmrm2"><a class="link" href="/rn-placeholder/components">Components</a></li><li class="css-txeiyh epjnmrm2"><a aria-current="page" class="link link-active" href="/rn-placeholder/animations">Animations</a></li></ul></nav><h1 id="available-animations"><a href="#available-animations" aria-label="available animations permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Available animations</h1><p>There are some built-in animations inside the library but you can create your own one if you need a specific one.</p><ul><li><a href="#fade">Fade</a></li><li><a href="#shineoverlay">ShineOverlay</a></li><li><a href="#shine">Shine</a></li><li><a href="#loader">Loader</a></li><li><a href="#progressive">Progressive</a></li><li><a href="#tweaking-existing-animations">Tweaking existing animations</a></li><li><a href="#build-your-own-one">Build your own one</a></li></ul><h2 id="fade"><a href="#fade" aria-label="fade permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Fade</h2><p>This is the base animation that makes the placeholder become clearer on a specified interval:</p><style data-emotion-css="thndr">.css-thndr{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);}</style><div class="css-thndr eomn50w0"><style data-emotion-css="1r98a9c">.css-1r98a9c{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media only screen and (max-width:480px){.css-1r98a9c{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}</style><div class="css-1r98a9c e1l7xqze0"><style data-emotion-css="1rr4qq7">.css-1rr4qq7{-webkit-flex:1;-ms-flex:1;flex:1;}</style><div size="1" class="css-1rr4qq7 e1l7xqze1"><div style="position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;white-space:pre;font-family:monospace;color:#393A34;background-color:#f6f8fa"><textarea style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:absolute;top:0;left:0;height:100%;width:100%;resize:none;color:inherit;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-fill-color:transparent;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px" class="npm__react-simple-code-editor__textarea" autoCapitalize="off" autoComplete="off" autoCorrect="off" spellcheck="false" data-gramm="false">function App() {
  return (
    &lt;Placeholder Animation={Fade}&gt;
      &lt;PlaceholderLine width={70} /&gt;
      &lt;PlaceholderLine width={50} /&gt;
      &lt;PlaceholderLine width={80} /&gt;
      &lt;PlaceholderLine width={30} /&gt;
    &lt;/Placeholder&gt;
    )
}</textarea><pre aria-hidden="true" style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:relative;pointer-events:none;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">App</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">Placeholder</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">Animation</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f">Fade</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PlaceholderLine</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">70</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PlaceholderLine</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">50</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PlaceholderLine</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">80</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PlaceholderLine</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">30</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag class-name" style="color:#00009f">Placeholder</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></div></pre><style type="text/css">
/**
 * Reset the text fill color so that placeholder is visible
 */
.npm__react-simple-code-editor__textarea:empty {
  -webkit-text-fill-color: inherit !important;
}

/**
 * Hack to apply on some CSS on IE10 and IE11
 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /**
    * IE doesn't support '-webkit-text-fill-color'
    * So we use 'color: transparent' to make the text transparent on IE
    * Unlike other browsers, it doesn't affect caret color in IE
    */
  .npm__react-simple-code-editor__textarea {
    color: transparent !important;
  }

  .npm__react-simple-code-editor__textarea::selection {
    background-color: #accef7 !important;
    color: transparent !important;
  }
}
</style></div></div><div size="1" class="css-1rr4qq7 e1l7xqze1"><style data-emotion-css="q5fqw0">.css-q5fqw0{padding:1rem;}</style><div class="css-q5fqw0 el04cmx0"><div><div class="css-1dbjc4n r-18u37iz r-13qz1uu"><div class="css-1dbjc4n r-13awgt0"><div class="css-1dbjc4n r-1udh08x" style="background-color:rgba(239,239,239,1.00);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:12px;margin-bottom:12px;width:70%"><div class="css-1dbjc4n" style="background-color:rgba(223,223,223,1.00);height:100%;opacity:0.5"></div></div><div class="css-1dbjc4n r-1udh08x" style="background-color:rgba(239,239,239,1.00);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:12px;margin-bottom:12px;width:50%"><div class="css-1dbjc4n" style="background-color:rgba(223,223,223,1.00);height:100%;opacity:0.5"></div></div><div class="css-1dbjc4n r-1udh08x" style="background-color:rgba(239,239,239,1.00);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:12px;margin-bottom:12px;width:80%"><div class="css-1dbjc4n" style="background-color:rgba(223,223,223,1.00);height:100%;opacity:0.5"></div></div><div class="css-1dbjc4n r-1udh08x" style="background-color:rgba(239,239,239,1.00);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:12px;margin-bottom:12px;width:30%"><div class="css-1dbjc4n" style="background-color:rgba(223,223,223,1.00);height:100%;opacity:0.5"></div></div></div></div></div></div></div></div><style data-emotion-css="os96a3">.css-os96a3{padding:1rem;text-align:center;}</style><div class="css-os96a3 el04cmx1">This is an example using<!-- --> <a href="https://github.com/necolas/react-native-web" target="__blank">react-native-web</a>. If you want to run it on a real device,<!-- --> <a href="https://snack.expo.io/@mfrachet/84bb31" target="__blank">check this Snack project</a></div></div><h2 id="shineoverlay"><a href="#shineoverlay" aria-label="shineoverlay permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ShineOverlay</h2><p>This applies a tiny overlay from left to right of the placeholder. It&#x27;s pretty neat but it has the drawback to only work without style customization: only on white background with gray lines.</p><div class="css-thndr eomn50w0"><div class="css-1r98a9c e1l7xqze0"><div size="1" class="css-1rr4qq7 e1l7xqze1"><div style="position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;white-space:pre;font-family:monospace;color:#393A34;background-color:#f6f8fa"><textarea style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:absolute;top:0;left:0;height:100%;width:100%;resize:none;color:inherit;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-fill-color:transparent;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px" class="npm__react-simple-code-editor__textarea" autoCapitalize="off" autoComplete="off" autoCorrect="off" spellcheck="false" data-gramm="false">function App() {
  return (
    &lt;Placeholder Animation={ShineOverlay}&gt;
      &lt;PlaceholderLine width={70} /&gt;
      &lt;PlaceholderLine width={50} /&gt;
      &lt;PlaceholderLine width={80} /&gt;
      &lt;PlaceholderLine width={30} /&gt;
    &lt;/Placeholder&gt;
    )
}</textarea><pre aria-hidden="true" style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:relative;pointer-events:none;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">App</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">Placeholder</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">Animation</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f">ShineOverlay</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PlaceholderLine</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">70</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PlaceholderLine</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">50</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PlaceholderLine</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">80</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PlaceholderLine</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">30</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag class-name" style="color:#00009f">Placeholder</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></div></pre><style type="text/css">
/**
 * Reset the text fill color so that placeholder is visible
 */
.npm__react-simple-code-editor__textarea:empty {
  -webkit-text-fill-color: inherit !important;
}

/**
 * Hack to apply on some CSS on IE10 and IE11
 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /**
    * IE doesn't support '-webkit-text-fill-color'
    * So we use 'color: transparent' to make the text transparent on IE
    * Unlike other browsers, it doesn't affect caret color in IE
    */
  .npm__react-simple-code-editor__textarea {
    color: transparent !important;
  }

  .npm__react-simple-code-editor__textarea::selection {
    background-color: #accef7 !important;
    color: transparent !important;
  }
}
</style></div></div><div size="1" class="css-1rr4qq7 e1l7xqze1"><div class="css-q5fqw0 el04cmx0"><div><div class="css-1dbjc4n"><div class="css-1dbjc4n r-18u37iz r-13qz1uu"><div class="css-1dbjc4n r-13awgt0"><div class="css-1dbjc4n r-1udh08x" style="background-color:rgba(239,239,239,1.00);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:12px;margin-bottom:12px;width:70%"><div class="css-1dbjc4n"></div></div><div class="css-1dbjc4n r-1udh08x" style="background-color:rgba(239,239,239,1.00);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:12px;margin-bottom:12px;width:50%"><div class="css-1dbjc4n"></div></div><div class="css-1dbjc4n r-1udh08x" style="background-color:rgba(239,239,239,1.00);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:12px;margin-bottom:12px;width:80%"><div class="css-1dbjc4n"></div></div><div class="css-1dbjc4n r-1udh08x" style="background-color:rgba(239,239,239,1.00);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:12px;margin-bottom:12px;width:30%"><div class="css-1dbjc4n"></div></div></div></div><div class="css-1dbjc4n" style="background-color:rgba(255,255,255,1.00);height:100%;left:0%;opacity:0.4;position:absolute;width:30px"></div></div></div></div></div></div><div class="css-os96a3 el04cmx1">This is an example using<!-- --> <a href="https://github.com/necolas/react-native-web" target="__blank">react-native-web</a>. If you want to run it on a real device,<!-- --> <a href="https://snack.expo.io/@mfrachet/84bb31" target="__blank">check this Snack project</a></div></div><h2 id="shine"><a href="#shine" aria-label="shine permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Shine</h2><p>The shine animation is an attempt to overcome the overlay problem of the <a href="#shineoverlay">ShineOverlay</a> animation by animating only the differnt part of the placeholder. It also has some drawbakcs.
Since each component has a different width, the animation is more or less quick dependending on the host size. For this kind of animation to perfectly work, it would be necessary to determine when the left size placeholder has finished animating and only then start to animate the next one.</p><div class="css-thndr eomn50w0"><div class="css-1r98a9c e1l7xqze0"><div size="1" class="css-1rr4qq7 e1l7xqze1"><div style="position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;white-space:pre;font-family:monospace;color:#393A34;background-color:#f6f8fa"><textarea style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:absolute;top:0;left:0;height:100%;width:100%;resize:none;color:inherit;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-fill-color:transparent;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px" class="npm__react-simple-code-editor__textarea" autoCapitalize="off" autoComplete="off" autoCorrect="off" spellcheck="false" data-gramm="false">function App() {
  return (
    &lt;Placeholder Animation={Shine}&gt;
      &lt;PlaceholderLine width={70} /&gt;
      &lt;PlaceholderLine width={50} /&gt;
      &lt;PlaceholderLine width={80} /&gt;
      &lt;PlaceholderLine width={30} /&gt;
    &lt;/Placeholder&gt;
    )
}</textarea><pre aria-hidden="true" style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:relative;pointer-events:none;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">App</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">Placeholder</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">Animation</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f">Shine</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PlaceholderLine</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">70</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PlaceholderLine</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">50</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PlaceholderLine</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">80</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PlaceholderLine</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">30</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag class-name" style="color:#00009f">Placeholder</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></div></pre><style type="text/css">
/**
 * Reset the text fill color so that placeholder is visible
 */
.npm__react-simple-code-editor__textarea:empty {
  -webkit-text-fill-color: inherit !important;
}

/**
 * Hack to apply on some CSS on IE10 and IE11
 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /**
    * IE doesn't support '-webkit-text-fill-color'
    * So we use 'color: transparent' to make the text transparent on IE
    * Unlike other browsers, it doesn't affect caret color in IE
    */
  .npm__react-simple-code-editor__textarea {
    color: transparent !important;
  }

  .npm__react-simple-code-editor__textarea::selection {
    background-color: #accef7 !important;
    color: transparent !important;
  }
}
</style></div></div><div size="1" class="css-1rr4qq7 e1l7xqze1"><div class="css-q5fqw0 el04cmx0"><div><div class="css-1dbjc4n r-18u37iz r-13qz1uu"><div class="css-1dbjc4n r-13awgt0"><div class="css-1dbjc4n r-1udh08x" style="background-color:rgba(239,239,239,1.00);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:12px;margin-bottom:12px;width:70%"><div class="css-1dbjc4n" style="background-color:rgba(255,255,255,1.00);height:100%;left:0%;opacity:0.5;width:40%"></div></div><div class="css-1dbjc4n r-1udh08x" style="background-color:rgba(239,239,239,1.00);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:12px;margin-bottom:12px;width:50%"><div class="css-1dbjc4n" style="background-color:rgba(255,255,255,1.00);height:100%;left:0%;opacity:0.5;width:40%"></div></div><div class="css-1dbjc4n r-1udh08x" style="background-color:rgba(239,239,239,1.00);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:12px;margin-bottom:12px;width:80%"><div class="css-1dbjc4n" style="background-color:rgba(255,255,255,1.00);height:100%;left:0%;opacity:0.5;width:40%"></div></div><div class="css-1dbjc4n r-1udh08x" style="background-color:rgba(239,239,239,1.00);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:12px;margin-bottom:12px;width:30%"><div class="css-1dbjc4n" style="background-color:rgba(255,255,255,1.00);height:100%;left:0%;opacity:0.5;width:40%"></div></div></div></div></div></div></div></div><div class="css-os96a3 el04cmx1">This is an example using<!-- --> <a href="https://github.com/necolas/react-native-web" target="__blank">react-native-web</a>. If you want to run it on a real device,<!-- --> <a href="https://snack.expo.io/@mfrachet/84bb31" target="__blank">check this Snack project</a></div></div><h2 id="loader"><a href="#loader" aria-label="loader permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Loader</h2><p>A simple placeholder animation based on the standard loader (<a href="https://facebook.github.io/react-native/docs/activityindicator">ActivityIndicator</a>) of each platforms.</p><div class="css-thndr eomn50w0"><div class="css-1r98a9c e1l7xqze0"><div size="1" class="css-1rr4qq7 e1l7xqze1"><div style="position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;white-space:pre;font-family:monospace;color:#393A34;background-color:#f6f8fa"><textarea style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:absolute;top:0;left:0;height:100%;width:100%;resize:none;color:inherit;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-fill-color:transparent;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px" class="npm__react-simple-code-editor__textarea" autoCapitalize="off" autoComplete="off" autoCorrect="off" spellcheck="false" data-gramm="false">function App() {
  return (
    &lt;Placeholder Animation={Loader}&gt;
      &lt;PlaceholderLine width={70} /&gt;
      &lt;PlaceholderLine width={50} /&gt;
      &lt;PlaceholderLine width={80} /&gt;
      &lt;PlaceholderLine width={30} /&gt;
    &lt;/Placeholder&gt;
    )
}</textarea><pre aria-hidden="true" style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:relative;pointer-events:none;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">App</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">Placeholder</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">Animation</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f">Loader</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PlaceholderLine</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">70</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PlaceholderLine</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">50</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PlaceholderLine</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">80</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PlaceholderLine</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">30</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag class-name" style="color:#00009f">Placeholder</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></div></pre><style type="text/css">
/**
 * Reset the text fill color so that placeholder is visible
 */
.npm__react-simple-code-editor__textarea:empty {
  -webkit-text-fill-color: inherit !important;
}

/**
 * Hack to apply on some CSS on IE10 and IE11
 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /**
    * IE doesn't support '-webkit-text-fill-color'
    * So we use 'color: transparent' to make the text transparent on IE
    * Unlike other browsers, it doesn't affect caret color in IE
    */
  .npm__react-simple-code-editor__textarea {
    color: transparent !important;
  }

  .npm__react-simple-code-editor__textarea::selection {
    background-color: #accef7 !important;
    color: transparent !important;
  }
}
</style></div></div><div size="1" class="css-1rr4qq7 e1l7xqze1"><div class="css-q5fqw0 el04cmx0"><div><div class="css-1dbjc4n r-1awozwy r-1777fci"><div class="css-1dbjc4n r-18u37iz r-13qz1uu"><div class="css-1dbjc4n r-13awgt0"><div class="css-1dbjc4n r-1udh08x" style="background-color:rgba(239,239,239,1.00);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:12px;margin-bottom:12px;width:70%"><div class="css-1dbjc4n"></div></div><div class="css-1dbjc4n r-1udh08x" style="background-color:rgba(239,239,239,1.00);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:12px;margin-bottom:12px;width:50%"><div class="css-1dbjc4n"></div></div><div class="css-1dbjc4n r-1udh08x" style="background-color:rgba(239,239,239,1.00);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:12px;margin-bottom:12px;width:80%"><div class="css-1dbjc4n"></div></div><div class="css-1dbjc4n r-1udh08x" style="background-color:rgba(239,239,239,1.00);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:12px;margin-bottom:12px;width:30%"><div class="css-1dbjc4n"></div></div></div></div><div aria-valuemax="1" aria-valuemin="0" role="progressbar" class="css-1dbjc4n r-1awozwy r-1pi2tsx r-1777fci r-u8s1d"><div class="css-1dbjc4n r-17bb2tj r-1muvv40 r-127358a r-1ldzwu0 r-z80fyv r-19wmn03"><svg height="100%" viewBox="0 0 32 32" width="100%"><circle cx="16" cy="16" fill="none" r="14" stroke-width="4" style="stroke:#1976D2;opacity:0.2"></circle><circle cx="16" cy="16" fill="none" r="14" stroke-width="4" style="stroke:#1976D2;stroke-dasharray:80;stroke-dashoffset:60"></circle></svg></div></div></div></div></div></div></div><div class="css-os96a3 el04cmx1">This is an example using<!-- --> <a href="https://github.com/necolas/react-native-web" target="__blank">react-native-web</a>. If you want to run it on a real device,<!-- --> <a href="https://snack.expo.io/@mfrachet/84bb31" target="__blank">check this Snack project</a></div></div><h2 id="progressive"><a href="#progressive" aria-label="progressive permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Progressive</h2><p>I&#x27;m feel a bit guilty about that but I&#x27;ve stolen the idea from a design system and I can&#x27;t remember which one. But I like the way it behaves:</p><div class="css-thndr eomn50w0"><div class="css-1r98a9c e1l7xqze0"><div size="1" class="css-1rr4qq7 e1l7xqze1"><div style="position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;white-space:pre;font-family:monospace;color:#393A34;background-color:#f6f8fa"><textarea style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:absolute;top:0;left:0;height:100%;width:100%;resize:none;color:inherit;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-fill-color:transparent;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px" class="npm__react-simple-code-editor__textarea" autoCapitalize="off" autoComplete="off" autoCorrect="off" spellcheck="false" data-gramm="false">function App() {
  return (
    &lt;Placeholder Animation={Progressive}&gt;
      &lt;PlaceholderLine width={70} /&gt;
      &lt;PlaceholderLine width={50} /&gt;
      &lt;PlaceholderLine width={80} /&gt;
      &lt;PlaceholderLine width={30} /&gt;
    &lt;/Placeholder&gt;
    )
}</textarea><pre aria-hidden="true" style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:relative;pointer-events:none;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">App</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">Placeholder</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">Animation</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f">Progressive</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PlaceholderLine</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">70</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PlaceholderLine</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">50</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PlaceholderLine</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">80</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PlaceholderLine</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">30</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag class-name" style="color:#00009f">Placeholder</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></div></pre><style type="text/css">
/**
 * Reset the text fill color so that placeholder is visible
 */
.npm__react-simple-code-editor__textarea:empty {
  -webkit-text-fill-color: inherit !important;
}

/**
 * Hack to apply on some CSS on IE10 and IE11
 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /**
    * IE doesn't support '-webkit-text-fill-color'
    * So we use 'color: transparent' to make the text transparent on IE
    * Unlike other browsers, it doesn't affect caret color in IE
    */
  .npm__react-simple-code-editor__textarea {
    color: transparent !important;
  }

  .npm__react-simple-code-editor__textarea::selection {
    background-color: #accef7 !important;
    color: transparent !important;
  }
}
</style></div></div><div size="1" class="css-1rr4qq7 e1l7xqze1"><div class="css-q5fqw0 el04cmx0"><div><div class="css-1dbjc4n r-18u37iz r-13qz1uu"><div class="css-1dbjc4n r-13awgt0"><div class="css-1dbjc4n r-1udh08x" style="background-color:rgba(239,239,239,1.00);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:12px;margin-bottom:12px;width:70%"><div class="css-1dbjc4n r-1pi2tsx r-u8s1d r-13qz1uu" style="background-color:rgba(0,0,0,0.10);right:0%"></div></div><div class="css-1dbjc4n r-1udh08x" style="background-color:rgba(239,239,239,1.00);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:12px;margin-bottom:12px;width:50%"><div class="css-1dbjc4n r-1pi2tsx r-u8s1d r-13qz1uu" style="background-color:rgba(0,0,0,0.10);right:0%"></div></div><div class="css-1dbjc4n r-1udh08x" style="background-color:rgba(239,239,239,1.00);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:12px;margin-bottom:12px;width:80%"><div class="css-1dbjc4n r-1pi2tsx r-u8s1d r-13qz1uu" style="background-color:rgba(0,0,0,0.10);right:0%"></div></div><div class="css-1dbjc4n r-1udh08x" style="background-color:rgba(239,239,239,1.00);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:12px;margin-bottom:12px;width:30%"><div class="css-1dbjc4n r-1pi2tsx r-u8s1d r-13qz1uu" style="background-color:rgba(0,0,0,0.10);right:0%"></div></div></div></div></div></div></div></div><div class="css-os96a3 el04cmx1">This is an example using<!-- --> <a href="https://github.com/necolas/react-native-web" target="__blank">react-native-web</a>. If you want to run it on a real device,<!-- --> <a href="https://snack.expo.io/@mfrachet/84bb31" target="__blank">check this Snack project</a></div></div><h2 id="tweaking-existing-animations"><a href="#tweaking-existing-animations" aria-label="tweaking existing animations permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Tweaking existing animations</h2><p>It&#x27;s possible to tweak a specific animation by passing it additional props. However keep in mind that it&#x27;s important to spread the props from the <code>Animation</code> render function. Else you will be in strange behaviors:</p><div class="css-thndr eomn50w0"><div class="css-1r98a9c e1l7xqze0"><div size="1" class="css-1rr4qq7 e1l7xqze1"><div style="position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;white-space:pre;font-family:monospace;color:#393A34;background-color:#f6f8fa"><textarea style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:absolute;top:0;left:0;height:100%;width:100%;resize:none;color:inherit;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-fill-color:transparent;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px" class="npm__react-simple-code-editor__textarea" autoCapitalize="off" autoComplete="off" autoCorrect="off" spellcheck="false" data-gramm="false">function App() {
  return (
    &lt;Placeholder
    Animation={(props) =&gt; (
      &lt;Loader {...props}
        size=&quot;large&quot;
        color=&quot;#00ff00&quot; /&gt;
      )}&gt;
      &lt;PlaceholderLine width={70} /&gt;
      &lt;PlaceholderLine width={50} /&gt;
      &lt;PlaceholderLine width={80} /&gt;
      &lt;PlaceholderLine width={30} /&gt;
    &lt;/Placeholder&gt;
    )
}</textarea><pre aria-hidden="true" style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:relative;pointer-events:none;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">App</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">Placeholder</span><span class="token tag" style="color:#00009f"></span></div><div class="token-line" style="color:#393A34"><span class="token tag" style="color:#00009f">    </span><span class="token tag attr-name" style="color:#00a4db">Animation</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript punctuation" style="color:#393A34">(</span><span class="token tag script language-javascript parameter" style="color:#00009f">props</span><span class="token tag script language-javascript punctuation" style="color:#393A34">)</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript operator" style="color:#393A34">=&gt;</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript punctuation" style="color:#393A34">(</span><span class="token tag script language-javascript" style="color:#00009f"></span></div><div class="token-line" style="color:#393A34"><span class="token tag script language-javascript" style="color:#00009f">      </span><span class="token tag script language-javascript tag punctuation" style="color:#393A34">&lt;</span><span class="token tag script language-javascript tag class-name" style="color:#00009f">Loader</span><span class="token tag script language-javascript tag" style="color:#00009f"> </span><span class="token tag script language-javascript tag spread punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript tag spread punctuation" style="color:#393A34">...</span><span class="token tag script language-javascript tag spread attr-value" style="color:#e3116c">props</span><span class="token tag script language-javascript tag spread punctuation" style="color:#393A34">}</span><span class="token tag script language-javascript tag" style="color:#00009f"></span></div><div class="token-line" style="color:#393A34"><span class="token tag script language-javascript tag" style="color:#00009f">        </span><span class="token tag script language-javascript tag attr-name" style="color:#00a4db">size</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:#393A34">&quot;</span><span class="token tag script language-javascript tag attr-value" style="color:#e3116c">large</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:#393A34">&quot;</span><span class="token tag script language-javascript tag" style="color:#00009f"></span></div><div class="token-line" style="color:#393A34"><span class="token tag script language-javascript tag" style="color:#00009f">        </span><span class="token tag script language-javascript tag attr-name" style="color:#00a4db">color</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:#393A34">&quot;</span><span class="token tag script language-javascript tag attr-value" style="color:#e3116c">#00ff00</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:#393A34">&quot;</span><span class="token tag script language-javascript tag" style="color:#00009f"> </span><span class="token tag script language-javascript tag punctuation" style="color:#393A34">/&gt;</span><span class="token tag script language-javascript" style="color:#00009f"></span></div><div class="token-line" style="color:#393A34"><span class="token tag script language-javascript" style="color:#00009f">      </span><span class="token tag script language-javascript punctuation" style="color:#393A34">)</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PlaceholderLine</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">70</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PlaceholderLine</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">50</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PlaceholderLine</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">80</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PlaceholderLine</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">30</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag class-name" style="color:#00009f">Placeholder</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></div></pre><style type="text/css">
/**
 * Reset the text fill color so that placeholder is visible
 */
.npm__react-simple-code-editor__textarea:empty {
  -webkit-text-fill-color: inherit !important;
}

/**
 * Hack to apply on some CSS on IE10 and IE11
 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /**
    * IE doesn't support '-webkit-text-fill-color'
    * So we use 'color: transparent' to make the text transparent on IE
    * Unlike other browsers, it doesn't affect caret color in IE
    */
  .npm__react-simple-code-editor__textarea {
    color: transparent !important;
  }

  .npm__react-simple-code-editor__textarea::selection {
    background-color: #accef7 !important;
    color: transparent !important;
  }
}
</style></div></div><div size="1" class="css-1rr4qq7 e1l7xqze1"><div class="css-q5fqw0 el04cmx0"><div><div class="css-1dbjc4n r-1awozwy r-1777fci"><div class="css-1dbjc4n r-18u37iz r-13qz1uu"><div class="css-1dbjc4n r-13awgt0"><div class="css-1dbjc4n r-1udh08x" style="background-color:rgba(239,239,239,1.00);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:12px;margin-bottom:12px;width:70%"><div class="css-1dbjc4n"></div></div><div class="css-1dbjc4n r-1udh08x" style="background-color:rgba(239,239,239,1.00);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:12px;margin-bottom:12px;width:50%"><div class="css-1dbjc4n"></div></div><div class="css-1dbjc4n r-1udh08x" style="background-color:rgba(239,239,239,1.00);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:12px;margin-bottom:12px;width:80%"><div class="css-1dbjc4n"></div></div><div class="css-1dbjc4n r-1udh08x" style="background-color:rgba(239,239,239,1.00);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:12px;margin-bottom:12px;width:30%"><div class="css-1dbjc4n"></div></div></div></div><div aria-valuemax="1" aria-valuemin="0" role="progressbar" class="css-1dbjc4n r-1awozwy r-1pi2tsx r-1777fci r-u8s1d"><div class="css-1dbjc4n r-17bb2tj r-1muvv40 r-127358a r-1ldzwu0 r-1r8g8re r-1acpoxo"><svg height="100%" viewBox="0 0 32 32" width="100%"><circle cx="16" cy="16" fill="none" r="14" stroke-width="4" style="stroke:#00ff00;opacity:0.2"></circle><circle cx="16" cy="16" fill="none" r="14" stroke-width="4" style="stroke:#00ff00;stroke-dasharray:80;stroke-dashoffset:60"></circle></svg></div></div></div></div></div></div></div><div class="css-os96a3 el04cmx1">This is an example using<!-- --> <a href="https://github.com/necolas/react-native-web" target="__blank">react-native-web</a>. If you want to run it on a real device,<!-- --> <a href="https://snack.expo.io/@mfrachet/84bb31" target="__blank">check this Snack project</a></div></div><h2 id="build-your-own-one"><a href="#build-your-own-one" aria-label="build your own one permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Build your own one</h2><p>You can build your own animation and pass it to the <code>Animation</code> prop of the <code>Placeholder</code> component.</p><p>In fact, what you can build is a <code>Provider</code> of value for animations.</p><p>I suggest you take a look at the implementation of the <a href="https://github.com/mfrachet/rn-placeholder/blob/master/src/animations/Progressive.tsx"><code>Progressive</code> animation implementation</a> and try to create something that look like this, and then pass it to the <code>Animation</code> prop.</p></div></div></div></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/animations";window.webpackCompilationHash="30c830dda2dbc3dc506d";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-c1d0fda0f226c9c9e4f2.js"],"component---src-templates-page-js":["/component---src-templates-page-js-6b5bdc100882280b29ff.js"]};/*]]>*/</script><script src="/rn-placeholder/component---src-templates-page-js-6b5bdc100882280b29ff.js" async=""></script><script src="/rn-placeholder/3-7b088af076c51f06ef3f.js" async=""></script><script src="/rn-placeholder/app-c1d0fda0f226c9c9e4f2.js" async=""></script><script src="/rn-placeholder/webpack-runtime-078e73121d17eb8e9125.js" async=""></script></body></html>